<template>
    <div class="app-container">
    
        <el-card class="box-card">
            <h3>商品介绍</h3>
            <el-form ref="store" :rules="rules" :model="store" label-width="150px">
                <el-form-item label="店铺名称" prop="name">
                    <el-input v-model="store.name" />
                </el-form-item>
                <el-form-item label="店铺地址" prop="address">
                    <el-input v-model="store.address" />
                </el-form-item>
                 <el-form-item label="主营业务" prop="themain">
                    <el-input v-model="store.themain" />
                </el-form-item>
                <el-form-item label="商家手机号" prop="phone">
                    <el-input v-model="store.phone" />
                </el-form-item>
                <el-form-item label="商家微信号" prop="wx">
                    <el-input v-model="store.wx" />
                </el-form-item>
                <el-form-item label="银行账号" prop="bankAccount">
                    <el-input v-model="store.bankAccount" />
                </el-form-item>
                <el-form-item label="开户行" prop="bankName">
                    <el-input v-model="store.bankName" />
                </el-form-item>
                <el-form-item label="邮费" prop="freightValue">
                  <el-input v-model="store.freightValue"/>
                </el-form-item>
                <el-form-item label="包邮最低消费" prop="freightMin">
                  <el-input v-model="store.freightMin"/>
                </el-form-item>
                <el-form-item label="是否支持共享" prop="wxShare">
                    <el-radio-group v-model="store.wxShare">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="营业执照号" prop="license">
                  <el-input v-model="store.license"/>
                </el-form-item>
                <el-form-item label="营业执照照片">
                  <el-upload :action="uploadPath" :show-file-list="false" :headers="headers" :on-success="uploadPicUrl"
                    class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
                    <img v-if="store.licenseImgUrl" :src="store.licenseImgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                  </el-upload>
                </el-form-item>
      </el-form>
    </el-card>

    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handlePublish">添加</el-button>
    </div>

  </div>
</template>

<style>
.el-card {
    margin-bottom: 10px;
}

.el-tag+.el-tag {
    margin-left: 10px;
}

.input-new-keyword {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}

.avatar-uploader .el-upload {
    width: 145px;
    height: 145px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 145px;
    height: 145px;
    display: block;
}
</style>

<script>
import {
    publishStore,
} from '@/api/store'
import {
    createStorage,
    uploadPath
} from '@/api/storage'
import Editor from '@tinymce/tinymce-vue'
import {
    MessageBox
} from 'element-ui'
import {
    getToken
} from '@/utils/auth'

export default {
    name: 'StoreCreate',
    components: {
        Editor
    },

    data() {
        return {
            uploadPath,
            newKeywordVisible: false,
            newKeyword: '',
            keywords: [],
            categoryList: [],
            brandList: [],
            store: {
                name:'',
                phone:'',
                wx:'',
                address:'',
                themain:'',
                bankAccount:'',
                bankName:'',
                freightValue:'',
                freightMin:'',
                wxShare:true,
                license:'',
                licenseImgUrl: ''
            },
            specVisiable: false,
            multipleSpec: false,
            productVisiable: false,
            attributeVisiable: false,
            attributeForm: {
                attribute: '',
                value: ''
            },
            attributes: [],
            rules: {
                name: [{
                    required: true,
                    message: '店铺名称不能为空',
                    trigger: 'blur'
                }],
                phone: [{
                    required: true,
                    message: '商家手机号不能为空',
                    trigger: 'blur'
                }],
                bankAccount: [{
                    required: true,
                    message: '银行账号不能为空',
                    trigger: 'blur'
                }],
                bankName: [{
                    required: true,
                    message: '开户行不能为空',
                    trigger: 'blur'
                }],
                license: [{
                    required: true,
                    message: '营业执照号不能为空',
                    trigger: 'blur'
                }]
            },
            editorInit: {
                language: 'zh_CN',
                height: 500,
                convert_urls: false,
                plugins: [
                    'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
                ],
                toolbar: [
                    'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
                    'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
                ],
                images_upload_handler: function(blobInfo, success, failure) {
                    const formData = new FormData()
                    formData.append('file', blobInfo.blob())
                    createStorage(formData).then(res => {
                        success(res.data.data.url)
                    }).catch(() => {
                        failure('上传失败，请重新上传')
                    })
                }
            }
        }
    },
    computed: {
        headers() {
            return {
                'X-Litemall-Admin-Token': getToken()
            }
        }
    },
    created() {
        // this.init()
    },

    methods: {
        handleCancel: function() {
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.push({
                path: '/store/list'
            })
        },
        handlePublish: function() {
            const finalstore = this.store
            publishStore(finalstore).then(response => {
                this.$notify.success({
                    title: '成功',
                    message: '创建成功'
                })
                this.$store.dispatch('tagsView/delView', this.$route)
                this.$router.push({
                    path: '/store/list'
                })
            }).catch(response => {
                MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
                    confirmButtonText: '确定',
                    type: 'error'
                })
            })
        },
        uploadPicUrl: function(response) {
            this.store.licenseImgUrl = response.data.url
        }
    }
}
</script>